<template>
  <div class="abulk">
    <p>团购管理</p>
    <div class="abulk-tab">
      <!-- 头部 -->
      <div class="top">
        <!-- 状态筛选 -->
        <span>
          状态
          <select v-model="option" @click="abulkState(option)">
            <option v-for="(item,index) in state" :key="index">{{item}}</option>
          </select>
        </span>
        <!-- 搜索 -->
        <span>
          搜索
          <input type="text" placeholder="团购名称" v-model="value" />
        </span>
        <!-- 查询 -->
        <button @click="check(value)">查询</button>
      </div>

      <!-- table -->
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>图片</th>
            <th>楼盘名称</th>
            <th>楼盘地址</th>
            <th>发起人</th>
            <th>起始时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.num}}</td>
            <td>{{item.name}}</td>
            <td>{{item.site}}</td>
            <td>{{item.people}}</td>
            <td>{{item.time}}</td>
            <td>{{item.type}}</td>
            <td>
              <span>删除</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "abulk",
  data() {
    return {
      list: [],
      state: ["请选择", "已开团", "未开团"],
      option: "请选择",
      abulkList: [],
      value: ""
    };
  },
  created() {
    //调用函数
    this.getList();
  },
  methods: {
    //获取团购数据
    getList() {
      axios({
        url: "/api/AbulkList"
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },

    //筛选数据
    abulkState(option) {
      axios({
        url: "/api/abulkState",
        method: "post",
        data: {
          option: option
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.getList();
        } else {
          //重新更新数据
          this.list = res.data.data;
        }
      });
    },

    //查询数据
    check(value) {
      axios({
        url:'/api/abulkCheck',
        method:'post',
        data:{
          value:value
        }
      }).then(res => {
        //重新更新数据
          this.list = res.data.data;
      })
    },
    
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.abulk {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.abulk > p {
  margin-left: 3%;
  font-size: 20px;
}

.abulk .abulk-tab {
  width: 94%;
  height: 90%;
  background-color: white;
  border-radius: 20px;
  margin-left: 3%;
  margin-top: 1%;
}

.abulk .abulk-tab .top {
  width: 100%;
  height: 100px;
  /* border-bottom: 1px solid #ccc; */
  /* line-height: 100px; */
}

.abulk .abulk-tab .top select {
  width: 100px;
  height: 30px;
  outline: none;
}

.abulk .abulk-tab .top input {
  width: 200px;
  height: 28px;
}

.abulk .abulk-tab .top button {
  width: 60px;
  height: 32px;
  margin-left: 30px;
}

.abulk .abulk-tab .top span {
  margin-left: 30px;
  margin-top: 40px;
  display: inline-block;
}

.abulk .abulk-tab table {
  width: 100%;
  background-color: #f2f2f2;
}

.abulk .abulk-tab table tr th {
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.abulk .abulk-tab table tr td {
  background-color: white;
  height: 55px;
  text-align: center;
}
</style>